import React, { useEffect, useState } from 'react';
import { Table, Drawer, Descriptions, Tag } from 'antd';
import BugDetail from './BugTetail';
const severityColors = {
  阻塞: 'red',
  严重: 'orange',
  一般: 'gold',
  轻微: 'green',
  样式问题: 'cyan',
};

const statusColors = {
  提出: 'purple',
  接收: 'blue',
  已修改: 'green',
};

const regressionColors = {
  衰退: 'red',
  Reopen: 'yellow',
};

const moduleColors = {
  登录注册: 'magenta',
  首页: 'red',
  博客模块: 'volcano',
  '管理模块（阅读管理）': 'orange',
  资源分享: 'gold',
  实用工具: 'lime',
  系统设置: 'green',
  全局问题: 'cyan',
};

const columns = [
  {
    title: 'Bug ID',
    dataIndex: 'id',
    width: 40,
    key: 'id',
  },
  {
    title: 'Bug描述',
    dataIndex: 'summary',
    key: 'summary',
    width: 200,
    render: text => <span style={{ color: 'blue' }}>{text}</span>,
  },
  {
    title: '严重程度',
    dataIndex: 'severity',
    key: 'severity',
    width: 90,
    render: severity => <Tag color={severityColors[severity]}>{severity}</Tag>,
  },
  {
    title: '提出者',
    dataIndex: 'submitterName',
    width: 90,
    key: 'submitterName',
  },
  {
    title: '衰退/Reopen标记',
    dataIndex: 'regression',
    key: 'regression',
    width: 90,
    render: regression =>
      regression === '无' ? (
        '-'
      ) : (
        <Tag color={regressionColors[regression]}>{regression}</Tag>
      ),
  },
  {
    title: '当前状态',
    dataIndex: 'status',
    width: 90,
    key: 'status',
    render: status => <Tag color={statusColors[status]}>{status}</Tag>,
  },
  {
    title: '模块',
    dataIndex: 'module',
    key: 'module',
    width: 100,
    render: module => <Tag color={moduleColors[module]}>{module}</Tag>,
  },
];

const BugListTable = () => {
  const [data, setData] = useState({ loading: true, bugs: [] });
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [drawerData, setDrawerData] = useState({});

  const fetchData = () => {
    console.log('获取bug清单');
    fetch('http://localhost:29157/api/bugs/list')
      .then(res => res.json())
      .then(responseData => {
        console.log(responseData);
        setData({ loading: false, bugs: responseData.data.bugs });
      })
      .catch(err => console.log(err));
  };

  useEffect(() => {
    fetchData();
  }, []);

  const showDrawer = record => {
    setDrawerData(record);
    setDrawerVisible(true);
  };

  const onClose = () => {
    setDrawerVisible(false);
  };

  return (
    <>
      <Table
        columns={columns}
        dataSource={data.bugs}
        loading={data.loading}
        onRow={record => ({ onClick: () => showDrawer(record) })}
      />
      <BugDetail
        visible={drawerVisible}
        onClose={onClose}
        data={drawerData}
      />
    </>
  );
};

export default BugListTable;
